<template>
  <div class="file-download-list">
    <!-- 空数据显示 -->
    <span
      v-if="!fileData || (Array.isArray(fileData) && fileData.length === 0)"
      class="empty-placeholder"
    >
      -
    </span>

    <!-- 文件数组显示 -->
    <div v-else-if="Array.isArray(fileData)" class="file-list">
      <el-link
        v-for="(fileUrl, index) in filesToShow"
        :key="index"
        type="primary"
        underline="never"
        class="file-link"
        @click="handleDownload(fileUrl, getFileName(fileUrl))"
      >
        <el-icon :size="12" class="download-icon">
          <Download />
        </el-icon>
        <span class="file-name">{{ getFileName(fileUrl) }}</span>
      </el-link>

      <!-- 显示剩余文件数量 -->
      <span v-if="remainingCount > 0" class="remaining-count">
        还有 {{ remainingCount }} 个文件...
      </span>
    </div>

    <!-- 单个文件显示 -->
    <el-link
      v-else
      type="primary"
      underline="never"
      class="single-file-link"
      @click="handleDownload(fileData, getFileName(fileData))"
    >
      <el-icon :size="14" class="download-icon">
        <Download />
      </el-icon>
      <span class="file-name">{{ getFileName(fileData) }}</span>
    </el-link>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { ElLink, ElIcon } from 'element-plus';
import { Download } from '@element-plus/icons-vue';

// 1. 定义 props，使用 'modelValue' 来接收 v-model 的值
const props = defineProps({
  // 文件数据，通过 v-model 绑定
  modelValue: {
    type: [String, Array],
    default: null,
  },
  // 最大显示文件数量
  maxShow: {
    type: Number,
    default: 3,
  },
  // 默认文件名
  defaultFileName: {
    type: String,
    default: '下载文件',
  },
});

// 2. 定义 emits，包含 'update:modelValue' 以支持 v-model
const emit = defineEmits(['update:modelValue', 'download']);

// 3. 创建一个计算属性来代理 modelValue，这是实现 v-model 的标准实践
const fileData = computed({
  // getter：读取时返回 prop 的值
  get() {
    return props.modelValue;
  },
  // setter：当此计算属性被赋值时，发出 update:modelValue 事件通知父组件更新
  set(newValue) {
    emit('update:modelValue', newValue);
  },
});

// 计算要显示的文件列表 (现在从 fileData.value 获取数据)
const filesToShow = computed(() => {
  if (!Array.isArray(fileData.value)) return [];
  return fileData.value.slice(0, props.maxShow).filter((url) => url);
});

// 计算剩余文件数量 (现在从 fileData.value 获取数据)
const remainingCount = computed(() => {
  if (!Array.isArray(fileData.value)) return 0;
  return Math.max(0, fileData.value.length - props.maxShow);
});

// 从URL中提取文件名
const getFileName = (url) => {
  if (!url) return props.defaultFileName;

  try {
    // 使用 URL API 来安全地解析链接
    const urlObj = new URL(url);
    const pathname = urlObj.pathname;
    // 从路径中获取最后一部分作为文件名
    const fileName = pathname.split('/').pop();
    return fileName || props.defaultFileName;
  } catch (error) {
    // 如果 URL 无效，返回默认文件名
    // console.error('Invalid URL provided:', url);
    return props.defaultFileName;
  }
};

// 处理文件下载
const handleDownload = (fileUrl, fileName) => {
  if (!fileUrl) return;

  // 创建一个临时的 <a> 标签来触发下载
  const link = document.createElement('a');
  link.href = fileUrl;
  link.download = fileName;
  link.target = '_blank'; // 在新标签页中打开，防止页面跳转

  // 添加到DOM，模拟点击，然后移除
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  // 触发 download 事件，将下载信息传递给父组件
  emit('download', { url: fileUrl, fileName });
};
</script>

<style scoped>
.file-download-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左对齐 */
}

.empty-placeholder {
  color: #909399;
  font-style: italic;
}

.file-list {
  display: flex;
  flex-direction: row;
  gap: 4px; /* 文件之间的垂直间距 */
}

.file-link,
.single-file-link {
  display: inline-flex; /* 使用 inline-flex 保证内容对齐 */
  align-items: center;
  gap: 4px; /* 图标和文字之间的间距 */
  cursor: pointer;
  text-decoration: none;
  font-size: 14px; /* 统一默认字体大小 */
}

.download-icon {
  flex-shrink: 0; /* 防止图标被压缩 */
}

.file-name {
  word-break: break-all; /* 长文件名自动换行 */
  line-height: 1.4;
  text-align: left; /* 文件名左对齐 */
}

.remaining-count {
  font-size: 12px;
  color: #909399;
  font-style: italic;
  margin-top: 4px;
}

/* 响应式设计：在小屏幕上调整字体大小 */
@media (max-width: 768px) {
  .file-link,
  .single-file-link {
    font-size: 13px;
  }

  .file-name {
    font-size: 13px;
  }
}
</style>
